<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>添加品牌</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <h3>添加品牌</h3>
    <form action="" method="post">
        品牌名称：<input id="brandName" name="brandName" v-model="brand.brandName"><br>
        企业名称：<input id="companyName" name="companyName" v-model="brand.companyName"><br>
        排序：<input id="ordered" name="ordered" v-model="brand.ordered"><br>
        描述信息：<textarea rows="5" cols="20" id="description" name="description" v-model="brand.description"></textarea><br>
        状态：
        <input type="radio" name="status" value="0" v-model="brand.status">禁用
        <input type="radio" name="status" value="1" v-model="brand.status">启用<br>

        <input id="btn" type="button" value="提交" v-on:click="addBrand()">
        <span id="message" style="color: red">{{message}}</span>
    </form>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            message: "",
            brand: {
                brandName: "",
                companyName: "",
                ordered: "",
                description: "",
                status: "1"
            }
        },
        methods: {
            addBrand() {
                let _this = this;
                axios.post("http://localhost:8080/vue-brand-demo/addServlet", _this.brand)
                    .then(function (resp) {
                        if (resp.data == "success") {
                            location.href = "http://localhost:8080/vue-brand-demo/brand.html";
                        } else {
                            _this.message = "添加失败";
                        }
                    });
            }
        }
    });
</script>

</body>
</html>